<template>
  <view class="wrapper">
    <u-navbar
      :title="$t('friend.Profile')"
      @rightClick="rightClick"
      @leftClick="leftClick(urlIndex)"
      :autoBack="false"
      :placeholder="true"
      bgColor="#61BDB2"
      leftIconSize="15px"
      leftIconColor="#FFFFFF"
      titleStyle="font-size: 17px; font-weight: 500; color: #FFFFFF;"
    >
      <view class="u-nav-slot" slot="right">
        <view style="font-size: 14px; font-weight: bold; color: #ffffff">{{
          $t("index.Edit")
        }}</view>
      </view>
    </u-navbar>
    <view class="content">
      <view class="box" style="margin-top: 0px">
        <view class="main-line">
          <image
            :src="formData.avatarCompress || formData.avatar"
            mode="aspectFill"
            class="avatar-icon"
            v-if="formData.userPersonalsId"
            @click="showPreview(formData.avatar)"
          ></image>
          <view class="iconfont icon-wodexiao avatar-icon" v-else></view>
          <view>
            <view class="main-text text-green">{{ formData.userName }}</view>
            <view class="tip-line">{{ time() }}</view>
          </view>
        </view>
      </view>
      <view class="box" style="margin-top: 0rpx">
        <view class="box_mm">
          <view class="mm_item" v-if="topInfo"
            >{{ $t("topTime") }}：{{ topInfo.endTime }}</view
          >
          <view class="mm_item" v-else>{{ $t("noTop") }}</view>
          <view class="mm_zidi" @click="zhiding">{{ $t("contacts.Pin") }}</view>
        </view>
        <view class="main-line">
          <view class="main-text">{{ $t("dating.VoiceRecording") }}</view>
        </view>
        <view>
          <view class="tip-line" v-if="!formData.voice">{{
            $t("friend.Voicenotsetyet")
          }}</view>
          <view
            class="bofang-view"
            v-else
            style="width: fit-content"
            @tap="playVoice"
          >
            <view
              class="iconfont icon-bofang bofang"
              style="color: #ffffff"
              v-if="!bofang"
            ></view>
            <image
              src="@/static/image/chart/play-right.png"
              class="play-right"
              v-else
            />
            <view class="iconfont icon-jindutiao progress-icon"></view>
            <view
              class="iconfont icon-jindutiao progress-icon"
              style="margin-left: 10upx"
            ></view>
          </view>
        </view>
        <view
          class="iconfont icon-bianji2 edit-icon"
          @click="handlePage('voice')"
        ></view>
      </view>
      <!-- <view class="box">
        <view class="main-line">
          <view class="main-text">{{
            formData.chat ? $t("friend.paidChat") : $t("friend.freeChat")
          }}</view>
        </view>
        <view class="tip-line" v-if="!formData.chat">{{
          $t("friend.feeChat")
        }}</view>
        <view class="tip-line" v-else style="width: 75%; line-height: 40rpx"
          >{{ $t("friend.payMoney1")
          }}<span class="chatprice">{{chatUnit.length?chatUnit[0].symbol:''}}{{ formData.price }}</span>
          {{ $t("friend.payMoney2") }} {{ $t("friend.platformMoney")
          }}<span class="chatprice">10%</span></view
        >
        <view
          class="iconfont icon-bianji2 edit-icon"
          @click="handlePage('Chat')"
        ></view>
      </view> -->
      <view class="box">
        <view class="main-line">
          <view class="main-text">{{ $t("friend.AboutMeandRequire") }}</view>
        </view>
        <view class="tip-line">
          {{ userJson.brief ? userJson.brief : $t("friend.information") }}
        </view>
        <view class="label-group">
          <view class="label-item">
            <view class="iconfont icon-xingbie label-icon"></view>
            <view class="text">{{
              formData.gender == 1 ? $t("friend.Male") : $t("friend.Female")
            }}</view>
          </view>
          <view class="label-item" v-if="userJson.height">
            <view class="iconfont icon-ruler-fill label-icon"></view>
            <view class="text">{{ userJson.height }}cm</view>
          </view>
          <view class="label-item" v-if="userJson.weight">
            <view class="iconfont icon-weight label-icon"></view>
            <view class="text">{{ userJson.weight }}kg</view>
          </view>
          <view class="label-item">
            <view class="iconfont icon-nianling label-icon"></view>
            <view class="text">{{ formData.userAge }}</view>
          </view>
          <view class="label-item">
            <view class="iconfont icon-weizhi label-icon"></view>
            <view class="text">{{
              formData.countryNew + "," + formData.regionNew
            }}</view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="main-line">
          <view class="main-text">{{ $t("dating.Purpose") }}</view>
        </view>
        <view
          class="info__link"
          v-if="formData.labelBoList && formData.labelBoList.length"
        >
          <view
            class="link-text"
            v-for="(label, index) in formData.labelList"
            :key="index"
            >#{{ getLabelLangType(label) }}</view
          >
        </view>
        <view class="tip-line" v-else>{{ $t("friend.information") }}</view>
      </view>
      <view class="box">
        <view class="main-line">
          <view class="main-text">{{ $t("dating.PicAndVideo") }}</view>
          <view class="progress"
            >({{
              formData.userImageList ? formData.userImageList.length : 0
            }}/9)</view
          >
        </view>
        <view class="img-line">
          <view
            v-if="!(formData.userImageList && formData.userImageList.length)"
            class="iconfont icon-jiahao add-box"
            @click="handlePage('photo', 0)"
          ></view>
          <view v-else class="img-item">
            <view class="img-block" @click="handlePage('photo', 0)">
              <view class="iconfont icon-jiahao add-box"></view>
            </view>
            <view
              v-for="(item, index) in formData.userImageList"
              :key="index"
              class="img-block"
            >
              <image
                v-if="!item.type"
                :src="item.imageUrlCompress"
                @click.stop="showPreview(item.imageUrl)"
                style="width: 214upx; height: 214upx; border-radius: 20rpx"
                mode="aspectFill"
              ></image>
              <j-video
                v-else-if="item.type == 1"
                play-btn-position="center"
                :danmu-btn="true"
                :controls="false"
                :url="item.imageUrl"
                :poster="item.imageUrlCompress || item.imageUrl"
                :width="'214upx'"
                :height="'214upx'"
                style="width: 214upx; height: 214upx; border-radius: 20rpx"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="main-line">
          <view class="main-text">{{ $t("friend.payPhoto") }}</view>
          <view class="progress"
            >({{
              formData.userImagePayList && formData.userImagePayList.length
            }}/9)</view
          >
        </view>
        <!-- <view class="price-line">
          <view class="block">
            <view class="price">{{photoUnit.length?photoUnit[0].symbol:''}}{{ formData.sumPrice || 0.0 }}</view>
            <view class="price-tip">{{ $t("friend.TotalReceived") }}</view>
          </view>
          <view class="block" style="margin-left: 12px">
            <view class="price">{{photoUnit.length?photoUnit[0].symbol:''}}{{ formData.jyUserAlbumPay.price|| 0.0 }}</view>
            <view class="price-tip">{{ $t("friend.UnitPrice") }}</view>
          </view>
        </view> -->
        <view class="tip-line" style="width: 100%; line-height: 40rpx">
          {{ $t("dating.payPicTextFrist") }}
          <span class="chatprice"
            >{{ photoUnit.length ? photoUnit[0].symbol : ""
            }}{{
              (formData.jyUserAlbumPay && formData.jyUserAlbumPay.price) || 0.0
            }}</span
          >
          {{ $t("dating.payPicTextMiddle") }}
          <br />
          {{ $t("dating.payPicTextLast") }}
          <span class="chatprice">{{ picFee }}%</span>
        </view>
        <view class="img-line">
          <view
            v-if="
              !(formData.userImagePayList && formData.userImagePayList.length)
            "
            class="iconfont icon-jiahao add-box"
            @click="handlePage('photo', 1)"
          ></view>
          <view v-else class="img-item">
            <view class="img-block" @click="handlePage('photo', 1)">
              <view class="iconfont icon-jiahao add-box"></view>
            </view>
            <view
              v-for="(item, index) in formData.userImagePayList"
              :key="index"
              class="img-block"
            >
              <image
                v-if="!item.type"
                :src="item.imageUrlCompress"
                @click.stop="showPreview(item.imageUrl)"
                style="width: 214upx; height: 214upx; border-radius: 20rpx"
                mode="aspectFill"
              ></image>
              <j-video
                v-else-if="item.type == 1"
                play-btn-position="center"
                :danmu-btn="true"
                :controls="false"
                :url="item.imageUrl"
                :poster="item.imageUrlCompress || item.imageUrl"
                :width="'214upx'"
                :height="'214upx'"
                style="width: 214upx; height: 214upx; border-radius: 20rpx"
              />
            </view>
          </view>
        </view>
      </view>
      <!-- btn -->
      <view class="del-btn" @click="delChat" v-if="formData.userPersonalsId">
        <view class="iconfont icon-shanchu3 del">
          <span style="margin-left: 20upx">{{ $t("friend.Delete") }}</span>
        </view>
      </view>
    </view>
    <u-popup
      :show="show"
      mode="center"
      :safeAreaInsetBottom="false"
      :round="20"
    >
      <view class="zhi-show">
        <view class="show_price" style="margin-bottom: 30rpx"
          >{{ $t("payment") }} {{ topConfig.amount }}</view
        >
        <view class="show_price" style="margin-bottom: 60rpx"
          >{{ $t("pinnedDay", { value: topConfig.dayNum }) }}？</view
        >
        <view class="btn_list">
          <view class="list-qu" @click="show = false">{{
            $t("index.Cancel")
          }}</view>
          <view class="xian"></view>
          <view class="list-que" @click="confirmTopping">{{
            $t("dating.sure")
          }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getTopConfig,
  topInfo,
  getTopConfigQuery,
  getTopInfoList,
  countryQueryList,
} from "@/services/new_api";
import jVideo from "../../uni_modules/j-video/components/j-video/j-video.vue";
import { getTimeDiff, getSymbol } from "@/utils/index";
import { delChat, queryFeePercent } from "@/services/makeFriend";
export default {
  components: { jVideo },
  name: "FriendsInformation",
  data() {
    return {
      show: false,
      formData: {},
      userJson: {},
      chatUnit: "",
      photoUnit: "",
      audio: "",
      bofang: false,
      language: "",
      chatFeeName: "jy.chat.platform",
      chatFee: null,
      picFeeName: "jy.album.platform",
      picFee: null,
      urlIndex: "FriendsInformation",
      topConfig: {},
      topInfo: null,
    };
  },
  onLoad(options) {
    this.getTopConfigQuery();
  },
  methods: {
    // 获取我的置顶信息
    async getTopInfoList() {
      const res = await getTopInfoList(this.formData.userPersonalsId);
      this.topInfo = res.result.data;
    },

    async getTopConfigQuery() {
      const res = await getTopConfigQuery("meet");
      this.topConfig = res.result.data || {};
    },

    // 置顶
    async confirmTopping() {
      if (!this.topConfig.id) {
        return;
      }
      const res = await topInfo({
        moduleType: "meet",
        topId: this.formData.userPersonalsId,
        topConfigId: this.topConfig.id,
      });
      this.show = false;
      if (res.code == 200) {
        uni.showToast({
          title: this.$t("index.operation-success"),
          icon: "none",
        });
      }
    },
    zhiding() {
      this.show = true;
    },
    async getFeePercent(feeName, type) {
      const resp = await queryFeePercent(feeName);
      if (resp.result.code === 200) {
        if (type === "chat") {
          this.chatFee = resp.result.msg * 100;
        } else if (type === "pic") {
          this.picFee = resp.result.msg * 100;
        }
      }
    },
    getLabelLangType(obj) {
      if (this.language === "zh-Hans") {
        return obj.label.cn;
      } else if (this.language === "en") {
        return obj.label.en;
      } else if (this.language === "ru") {
        return obj.label.ru;
      }
    },
    time() {
      return getTimeDiff(this.formData.lastTime, "minutes", true);
    },
    // //播放语音
    // playVoice() {
    //   if (this.audio) {
    //     this.audio.destroy();
    //   }
    //   this.bofang = true;
    //   this.audio = uni.createInnerAudioContext();
    //   this.audio.autoplay = true;
    //   this.audio.src = this.formData.voice; //音频地址
    //   this.audio.play(); //执行播放
    //   this.audio.onPause(() => {
    //     this.audio.destroy();
    //     this.audio = undefined;
    //     this.bofang = false;
    //   });
    // },
    //预览
    showPreview(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    rightClick() {
      uni.navigateTo({
        url: `/pagesDiscover/friendsInformation/EditData?formData=1`,
      });
    },
    gotoBack() {
      uni.switchTab({
        url: "/",
      });
    },
    handlePage(type, label) {
      switch (type) {
        case "voice":
          uni.navigateTo({
            url: `/pagesDiscover/friendsInformation/EditVoice`,
          });
          break;
        case "Chat":
          uni.navigateTo({
            url: `/pagesDiscover/friendsInformation/CompilerChat`,
          });
          break;
        case "photo":
          uni.navigateTo({
            url: `/pagesDiscover/friendsInformation/UploadPhotos?type=${label}`,
          });
          break;
        default:
          break;
      }
    },
    //删除付费
    delChat() {
      let _this = this;
      uni.showModal({
        title: this.$t("dating.DeleteProfile"),
        cancelText: this.$t("cancel"),
        confirmText: this.$t("Ok"),
        content: this.$t("dating.deleteData"),
        success: function (res) {
          if (res.confirm) {
            _this.deleteData();
            // console.log('用户点击确定');
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    async deleteData() {
      uni.showLoading();
      const resp = await delChat();
      uni.hideLoading();
      if (!resp.success) return;
      this.handleReleaseInfoGlobal();
      uni.switchTab({
        url: "/pages/makefriends/MakeFriends",
      });
    },
    // 创建播放音频
    playCreate() {
      this.audio = uni.createInnerAudioContext();
      this.audio.autoplay = false;
      this.audio.src = this.formData.voice; //音频地址
    },
    // 销毁音频
    playDestroy() {
      this.bofang = false;
      if (this.audio) {
        this.audio.destroy();
      }
      this.audio = undefined;
    },
    //播放语音
    playVoice() {
      this.bofang = !this.bofang;
      if (this.bofang) {
        this.audio.play(); // 执行播放
      } else {
        this.audio.pause();
        this.audio.seek(0);
      }
      this.audio.onEnded(() => {
        this.bofang = false;
      });
    },
  },
  async onShow(option) {
    this.language = uni.getLocale();
    this.getPrePages(this.urlIndex); // 获取上一个页面的路径已经参数
    await this.handleReleaseInfoGlobal();
    this.formData = this.$store.state.friendsInformation;
    if (this.formData.voice) {
      this.playCreate();
    }
    this.formData.regionNew = this.formData.region
      ? this.getRegionNameList(JSON.parse(this.formData.region)).join(",")
      : null;
    this.formData.countryNew = this.formData.country
      ? this.getCountryName(JSON.parse(this.formData.country))
      : null;
    this.formData.labelList = !this.formData.labelBoList
      ? []
      : this.formData.labelBoList.map((item) => {
          return {
            ...item,
            label: JSON.parse(item.labelName),
          };
        });
    if (this.formData) {
      this.userJson = JSON.parse(this.formData.userJson);
      // this.getFeePercent(this.chatFeeName, 'chat')
      this.getFeePercent(this.picFeeName, "pic");
      // this.chatUnit = await getSymbol(this.formData.userAccount.currencyId);
      this.photoUnit = await getSymbol(this.formData.jyUserAlbumPay.currencyId);
    }
    this.getTopInfoList();
  },
  onHide() {
    this.playDestroy();
  },
  onUnload() {
    this.playDestroy();
  },
};
</script>

<style lang="scss" scoped>
.zhi-show {
  overflow: hidden;
  width: 558rpx;
  height: 280rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 60rpx;
  .show_price {
    text-align: center;
    color: #000000;
    font-size: 30rpx;
    font-weight: bold;
  }
  .btn_list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1rpx solid #e7e7e7;
    height: 100rpx;
    position: relative;
    .list-qu {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .xian {
      width: 2rpx;
      height: 100rpx;
      background: #e7e7e7;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .list-que {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #222222;
    }
  }
}
.box_mm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
  .mm_zidi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #61bdb2;
    color: #ffffff;
    font-size: 26rpx;
    padding: 10rpx 20rpx;
  }
}
.wrapper {
  background: #61bdb2;
  width: 100%;
  .content {
    background: #ffffff;
    width: 100%;
    min-height: 100vh;
    border-radius: 50upx 50upx 0 0;
    box-sizing: border-box;
    padding: 50upx 30upx 80upx;
    .box {
      margin-top: 70upx;
      position: relative;
      .main-line {
        display: flex;
        align-items: center;
        .avatar-icon {
          font-size: 46upx;
          color: rgba(97, 189, 178, 0.5);
          margin-right: 40upx;
          width: 110upx;
          height: 110upx;
          background: #e8f3f2;
          border-radius: 10upx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .main-text {
          flex: 1;
          font-size: 36upx;
          font-weight: 500;
          color: #000000;
          line-height: 1em;
          &.text-green {
            color: #61bdb2;
          }
        }
        .progress {
          font-size: 26upx;
          font-weight: 400;
          color: #878787;
        }
      }
      .tip-line {
        margin-top: 20upx;
        font-size: 26upx;
        font-weight: 400;
        color: #878787;
      }
      .edit-icon {
        position: absolute;
        top: 70rpx;
        right: 0;
        width: 72upx;
        height: 56upx;
        background: #61bdb2;
        border-radius: 28px;
        font-size: 30upx;
        color: #ffffff;
        text-align: center;
        line-height: 56upx;
      }
      .add-box {
        width: 214upx;
        height: 214upx;
        background: #ebf3f2;
        border-radius: 20upx;
        font-size: 60upx;
        text-align: center;
        line-height: 214upx;
        color: #61bdb2;
      }
      .price-line {
        margin-top: 30upx;
        display: flex;
        justify-content: space-between;
        .block {
          width: 50%;
          height: 133upx;
          background: #f6f6f6;
          border-radius: 20upx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .price {
            font-size: 36upx;
            font-weight: 500;
            color: #fe6600;
          }
          .price-tip {
            margin-top: 10upx;
            font-size: 24upx;
            font-weight: 400;
            color: #000000;
          }
        }
      }
      .label-group {
        display: flex;
        flex-wrap: wrap;
        .label-item {
          margin-top: 24upx;
          margin-right: 24upx;
          height: 64upx;
          background: #ebf3f2;
          border-radius: 12upx;
          box-sizing: border-box;
          padding: 0 24upx;
          display: flex;
          align-items: center;
          .label-icon {
            font-size: 30upx;
            color: #61bdb2;
            margin-right: 18upx;
          }
          .text {
            font-size: 26upx;
            font-weight: 500;
            color: #000000;
          }
        }
      }
    }
  }
}
.bofang-view {
  height: 78upx;
  padding: 15upx 36upx;
  background: #61bdb2;
  border-radius: 39upx;
  display: flex;
  align-items: center;
  margin-top: 30upx;
  box-sizing: border-box;
  .bofang {
    color: #e9f3f2;
    font-size: 48upx;
  }
  .progress-icon {
    z-index: 10;
    font-size: 24rpx;
    margin-left: 20rpx;
    color: #ffffff;
  }
}
.info__link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 27upx;
}
.link-text {
  display: block;
  margin-bottom: 13rpx;
  color: #61bdb2;
  font-size: 24rpx;
  margin-right: 40upx;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; // 默认不换行
}
.chatprice {
  font-size: 26upx;
  font-weight: 400;
  color: #fe6600;
  // margin: 0 10upx;
}
.img-line {
  display: flex;
  align-items: center;
  margin-top: 30upx;
  flex-wrap: wrap;
}
.img-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.img-block {
  width: 33.3%;
  margin-bottom: 17upx;
}
.del-btn {
  background: #ffffff;
  border: 2upx solid #fe6600;
  border-radius: 20upx;
  text-align: center;
  height: 90upx;
  line-height: 90upx;
  margin-top: 90upx;
  .del {
    color: #fe6600;
  }
}

.play-right {
  width: 48upx;
  height: 48upx;
}
</style>
